<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
		    margin: 0;
		    padding: 0;
		}
		body{
		    font-family: "微软雅黑";
		    color: #14191e; 
		}
		.main{
		    width: 1200px;
		    height: 460px;
		    margin: 30px auto;
		    overflow: hidden;
		    position: relative;
		}
		/* 焦点图 */
		.banner{
		    width: 1200px;
		    height: 460px;
		    overflow: hidden;
		}
		.banner_slide{
		    width: 1200px;
		    height: 460px;
		    float: left;
		    background-repeat: no-repeat;
		    /* display: none; */
		}
		.slide_active{
		    display: block;
		}
		.slide1{
		    background-image: url(./img/img1.webp);
			background-size: contain;
		}
		.slide2{
		    background-image: url(./img/img2.webp);
		}
		.slide3{
		    background-image: url(./img/img3.webp);
		}
		.slide4{
		    background-image: url(./img/img4.jpg);
			background-size: contain;
		}
		.slide5{
		    background-image: url(./img/img5.webp);
		}
		a{
		    text-decoration: none;
		}
		a:link,a:visited{
		    color: #5e5e5e;
		}
		.button{
		    position: absolute;
		    width: 40px;
		    height: 80px;
		    background: url(img/icon-slides.png) right center no-repeat;
		    left: 244px;
		    color: black;
		    top: 50%;
		    margin-top: -40px;
		    transform: rotate(180deg);
		}
		.button:hover{
		    background-color: black;
		    opacity: 0.8;
		    filter: alpha(opacity=80);
		}
		.next{
		    left: auto;
		    right:0px;
		    transform: rotate(0deg);
		}
		.dots{
		    position: absolute;
		    right:24px;
		    bottom: 24px;
		    line-height: 12px;
		}
		.dots span{
		    display: inline-block;
		    width: 12px;
		    height: 12px;
		    border-radius: 50%;
		    background-color: rgba(7,17,27,0.4);
		    margin-left: 8px;
		    box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
		    cursor: pointer;
		}
		.dots span.active{
		    background-color: #fff;
		    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
		}
		/* 菜单 */
		.menu_box{
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 244px;
		    height: 460px;
		    background: rgba(7,17,27,0.3);
		}
		/*主菜单*/
		.menu_content{
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 244px;
		    height: 460px;
		    z-index: 2;
		}
		.menu_item{
		    height: 64px;
		    line-height: 66px;
		    font-size: 12px;
		    cursor: pointer;
		    padding: 0 24px;
		    border-bottom:1px solid rgba(255,255,255,0.2);
		}
		.menu_item a{
		    display: block;
		    color: #fff;
		    font-size: 16px;
		    height: 63px;
		    padding: 0 8px;
			position: relative;
		}
		.menu_item:last-child a{
		    border-bottom:none;
		}
		.menu_item a::before {
			content: "\e61f";
			position: absolute;
			right: 0px;
			top: 2px;
			color: rgba(255,255,255,0.5);
			font-style: normal;
			font-weight: normal;
			font-family: "iconfont";
			font-size:16px;
		}
		.sub_menu{
		    width: 730px;
		    height: 458px;
		    position:absolute;
		    left: 244px;
		    top: 0;
		    background: #fff;
		    z-index: 10;
		    border:1px solid #fff;
		    box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1);
			height: 0;
			transition: height .5s linear;
			/* overflow: hidden; */
		}
		.inner_box{
		    width: 100%;
		    height: 100%;
		    background:rgba(0,0,0,0.1);
		}
		.sub_inner_box{
		     width: 652px;
		     margin-left: 40px;
		     overflow: hidden;
		}
		.title{
		    font-size: 16px;
		    color: #f01414;
		    line-height: 16px;
		    font-weight: bold;
		    margin: 28px 0 30px 0;
		}
		.sub_row{
		    margin-bottom: 25px;
		}
		.bold{
		    font-weight: 700;
		}
		.mr10{
		    margin-right: 10px;
		}
		.ml10{
		    margin-left: 10px;
		}
		.hide{
		    display: none;
		}
	</style>
	<body>
		<div class="main" id="main">
		    <!-- 子菜单 -->
		    <div class="sub_menu hide" id="sub_menu">
		        <div class="inner_box">
		            <div class="sub_inner_box">
		                <div class="title">手机,配件</div>
		                <div class="sub_row">
		                    <span class="bold mr10">手机通讯:</span>
		                    <a href="#">手机</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">手机维修</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">以旧换新</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">手机配件:</span>
		                    <a href="#">手机壳</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">手机存储卡</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">数据线</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">充电线</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">电池</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">运营商:</span>
		                    <a href="#">中国联通</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">中国移动</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">中国电信</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">智能设备:</span>
		                    <a href="#">智能手环</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">智能家居</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">智能手表</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">其他配件</a>
		                </div> 
		                 <div class="sub_row">
		                    <span class="bold mr10">娱乐:</span>
		                    <a href="#">耳机</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">音响</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">收音机</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">麦克风</a>
		                </div> 
		            </div>
		        </div>
		        <div class="inner_box">
		            <div class="sub_inner_box">
		                <div class="title">电脑</div>
		                <div class="sub_row">
		                    <span class="bold mr10">电脑:</span>
		                    <a href="#">笔记本</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">平板</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">一体机</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">电脑配件:</span>
		                    <a href="#">显示器</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">CPU</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">主板</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">硬盘</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">电源</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">显卡</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">其他配件</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">游戏设备:</span>
		                    <a href="#">游戏机</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">耳机</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">游戏软件</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">网络产品:</span>
		                    <a href="#">路由器</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">网络机顶盒</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">交换机</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">存储卡</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">网卡</a>
		                </div> 
		                 <div class="sub_row">
		                    <span class="bold mr10">外部产品:</span>
		                    <a href="#">鼠标</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">键盘</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">U盘</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">移动硬盘</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">鼠标垫</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">电脑清洁</a>
		                </div> 
		            </div>
		        </div>
		        <div class="inner_box">
		            <div class="sub_inner_box">
		                <div class="title">家用电器</div>
		                <div class="sub_row">
		                    <span class="bold mr10">电视:</span>
		                    <a href="#">国产品牌</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">韩国品牌</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">欧美品牌</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">空调:</span>
		                    <a href="#">显示器/</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">柜式</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">中央</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">壁挂式</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">冰箱:</span>
		                    <a href="#">多门</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">对开门</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">三门</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">双门</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">洗衣机:</span>
		                    <a href="#">滚筒式</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">洗衣机</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">迷你洗衣机</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">洗烘一体机</a>
		                </div> 
		                 <div class="sub_row">
		                    <span class="bold mr10">厨房电器:</span>
		                    <a href="#">油烟机</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">洗碗机</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">燃气灶</a>
		                </div> 
		            </div>
		        </div>
		        <div class="inner_box">
		            <div class="sub_inner_box">
		                <div class="title">家具</div>
		                <div class="sub_row">
		                    <span class="bold mr10">家纺:</span>
		                    <a href="#">被子</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">枕头</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">四件套</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">床垫</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">灯具:</span>
		                    <a href="#">台灯</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">顶灯</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">节能灯</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">应急灯</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">厨具:</span>
		                    <a href="#">烹饪锅具</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">餐具</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">菜板刀具</a>
		                </div>
		                <div class="sub_row">
		                    <span class="bold mr10">家装:</span>
		                    <a href="#">地毯</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">沙发垫套</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">装饰字画</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">照片墙</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">窗帘</a>
		                </div> 
		                 <div class="sub_row">
		                    <span class="bold mr10">生活日用:</span>
		                    <a href="#">收纳用品</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">浴室用品</a>
		                    <span class="ml10 mr10">/</span>
		                    <a href="#">雨伞雨衣</a>
		                </div> 
		            </div>
		        </div>
		    </div>
		    <!-- 主菜单 -->
		    <div class="menu_box" id="menu_content">
		        <div class="menu_item">
		            <a href="#">
		                <span>手机,配件</span>
		            </a>
		        </div>
		        <div class="menu_item">
		            <a href="#">
		                <span>电脑</span>
		            </a>
		        </div>
		        <div class="menu_item">
		            <a href="#">
		                <span>家用电器</span>
		            </a>    
		        </div>
		        <div class="menu_item">
		            <a href="#">
		                <span>家具</span>
		            </a>
		        </div>
		    </div>
		    <!-- 焦点图 -->
		   <div class="banner" id="banner">
		        <a href="#">
		        	<div class="banner_slide slide1 slide_active"></div>
		        </a>
		        <a href="#">
		        	<div class="banner_slide slide2"></div>
		        </a>
		        <a href="#">
		        	<div class="banner_slide slide3"></div>
		        </a>
		        <a href="#">
		        	<div class="banner_slide slide4"></div>
		        </a>
				<a href="#">
					<div class="banner_slide slide5"></div>
				</a>
		    </div>
		    <a href="javascript:void(0)" class="button prev" id="prev"></a>
		    <a href="javascript:void(0)" class="button next" id="next"></a>
		    <div class="dots" id="dots">
		        <span class="active"></span>
		        <span></span>
		        <span></span>
		        <span></span>
				<span></span>
		    </div>
		</div>
	</body>
</html>
<script type="text/javascript">
	// // 声明全局变量
	var index = 0, //当前显示图片的索引,默认值为0
		timer,//定时器
		main = byId("main"),
		prev = byId("prev");/*上一张*/
		next = byId("next");/*下一张*/
		pics = byId("banner").getElementsByTagName("div"),
		dots = byId("dots").getElementsByTagName("span"),
		banner = byId("banner"),
		menuContent = byId("menu_content"),
		menuItems = menuContent.getElementsByClassName("menu_item"),
		subMenu = byId("sub_menu"),
		innerBox = subMenu.getElementsByClassName("inner_box"),
		size = pics.length;
	//封装getElemenById()
	function byId(id) {
		return typeof(id) === "string" ? document.getElementById(id):id;
	}
	//封装通用事件绑定方法
	//element绑定事件的Dom元素
	//事件名
	//事件处理程序
	function addHandler(element,type,handler){
		// 非IE浏览器
		if(element.addEventListener){
			element.addEventListener(type,handler,true);
			//IE浏览器支持Dom2级
		}else if(element.attachEvent){
			element.attachEvent("on"+type,handler);
			//IE浏览器不支持Dom2级
		}else{
			element["on" + type] = handler;
		}
	}
	// 清除定时器,停止自动轮播
	function stopAutoPlay(){
		if(timer){
			clearInterval(timer);
		}
	}
	// 点击下一张按钮显示下一张图片
	addHandler(prev,"click",function(){
		index--;
		if(index<0) index = size-1;
		changeImg();
	});	
	// 点击上一张按钮显示上一张图片
	addHandler(next,"click",function(){
		index++;
		if(index>=size) index = 0;
		changeImg();
	});
	// 开启自动轮播
	function startAutoPlay(){
		timer = setInterval(function(){
			index++;
			if(index>=size) index = 0;
			changeImg();
		},1000)
	}
	// 切换图片
	function changeImg(){
		for(var i = 0;i<size;i++){
			pics[i].style.display = "none";
			dots[i].className = "";
		}
		pics[index].style.display = "block";
		dots[index].className = "active";
	}
	// 点击圆点索引切换图片
	for(var d = 0;d<size;d++){
		dots[d].setAttribute("data_id",d);
		addHandler(dots[d],"click",function(){
			index = this.getAttribute("data_id");
			changeImg();
		})
	}
	// 鼠标滑入main,停止轮播
	addHandler(main,"mouseover",stopAutoPlay)
	// 鼠标离开main,再次开启	轮播
	addHandler(main,"mouseout",startAutoPlay)
	// 自动开启轮播
	startAutoPlay();
	//鼠标滑过主菜单
	for (var m = 0,idx,mlen = menuItems.length;m < mlen;m++) {
		// 给所有主菜单定义属性,标明他的索引
		menuItems[m].setAttribute("data_index",m);
		addHandler(menuItems[m],"mouseover",function(){
			// 显示子菜单所在的背景
			subMenu.className = "sub_menu";
			// 获取当前主菜单的索引
			idx = this.getAttribute("data_index");
			//遍历所有的子菜单innerBox,将它们隐藏
			for(var j =0, jlen =innerBox.length;j<jlen;j++){
				// 隐藏所有子菜单
				innerBox[j].style.display = "none";
				//所有主菜单取消背景
				menuItems[j].style.background = "none";
			}
			// 找到当前子菜单,让其显示出来	
			innerBox[idx].style.display = "block";
			menuItems[idx].style.background = "#FF6700";
		})
		addHandler(menuItems[m],"mouseout",function(){
			// 显示子菜单所在的背景
			menuItems[idx].style.background = "";
		})
	}
	//鼠标离开banner,隐藏子菜单
	addHandler(banner,"mouseout",function(){
		subMenu.className = "sub_menu hide"
	})
	//鼠标离开主菜单menu_content	
	addHandler(menuContent,"mouseout",function(){
		subMenu.className = "sub_menu hide"
	})
	// //鼠标滑入子菜单时,子菜单显示
	addHandler(subMenu,"mouseover",function(){
		this.className = "sub_menu";
	})
	//鼠标离开子菜单时,子菜单隐藏
	addHandler(subMenu,"mouseout",function(){
		this.className = "sub_menu hide";
	})
</script>